<%--
  Created by IntelliJ IDEA.
  User: Mr.G
  Date: 2019/2/16
  Time: 11:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
    <script src="${path}/assets/js/echarts.common.min.js"></script>
</head>
<body>
<div class="layui-row">
    <div class="col-md-6">
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline">
                    <select name="" class="layui-select" lay-filter="time" id="">
                        <option value="1">当日</option>
                        <option value="2">本周</option>
                        <option value="3">本月</option>
                        <option value="4">本年</option>
                    </select>
                </div>
            </div>

        </form>
    </div>
    <div class="col-md-6">
        <div id="six" class="col-md-12" style="height:600px; width: 400px"></div>
    </div>
</div>
<script>
    layui.use(['table','form'],function () {
        layui.form.on('select(time)', function(data){
            var state = data.value
            $.get('${path}/Echart/gongzuoliang',{state:state},function (data){
                var name=data.username;
                var count =data.countNum;
                var service=[];
                for (var i=0;i<name.length;i++){
                    var obj=new Object();
                    obj.name=name[i];
                    obj.value=count[i];
                    service[i]=obj;
                }
                myCharts.setOption({        //加载数据图表                
                    legend: {
                        data: name
                    },
                    series: [{
                        data: service
                    }]
                });
                //隐藏等待图
                myCharts.hideLoading();
            }) ;
        });
    })
    // 基于准备好的dom，初始化echarts实例
    var myCharts = echarts.init(document.getElementById('six'));
    //设置等待图
    myCharts.showLoading();
    option = {
        title : {
            text: '工作量统计',
            subtext: '比率',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myCharts.setOption(option);
    /* $.post('/Echart/FXSaleTOP',function (data) {
         var xq = data.namelist;
         var xqsum = data.countlist ;*/
    $.get('${path}/Echart/gongzuoliang',function (data){
        var name=data.username;
        var count =data.countNum;
        var service=[];
        for (var i=0;i<name.length;i++){
            var obj=new Object();
            obj.name=name[i];
            obj.value=count[i];
            service[i]=obj;
        }
        myCharts.setOption({        //加载数据图表                
            legend: {
                data: name
            },
            series: [{
                data: service
            }]
        });
        //隐藏等待图
        myCharts.hideLoading();
    }) ;
</script>
</body>
</html>
